import React, { useState, useEffect } from 'react';
import styles from './index.less';
import loginDefault from '../../assets/my/loginIcon.png';
import loginDefaultEn from '../../assets/my/loginIconEn.png';
import { setPathName } from '../../utils/authority';
import { useLocation, useDispatch, useHistory, useSelector } from 'dva';
import usePathName from '../../components/hooks/usePathName';
import personalImg from '../../assets/my/personal.png';
import NewModal from '../../components/newModal';
import Enquiry from './Enquiry/enquiry';
import { getToken, removeToken } from '../../utils/authority';
import { Toast } from 'antd-mobile';
import { useIntl, getLocale } from 'umi';

import RoleSelect from './components/role-select';

function Index() {
  const dispatch = useDispatch();
  const history = useHistory();
  const [isShowModal, setIsShowModal] = useState(false);
  const pathName = usePathName();
  const { userInfo, roleSelectModalVisible } = useSelector(({ index }) => index);
  const intl = useIntl();

  let token = getToken();
  let phoneReg = /^1[0-9]{10}$/;
  const menus = [
    {
      title: intl.formatMessage({ id: 'ENTERPRISE_INFORMATION_MATERIALS' }),
      icon: require('../../assets/my/enterpriseIcon.png'),
      showItem: userInfo?.exhibitor,
      visible: [2],
      callback: () => {
        if (!token) {
          dispatch({
            type: 'index/setState',
            payload: {
              loginModalShow: true,
            },
          });
          return;
        }
        history.push('/enterpriseInfo');
      },
    },
    {
      title: intl.formatMessage({ id: 'ENTERPRISE_PUBLICITY_MATERIALS' }),
      icon: require('../../assets/my/publicityIcon.png'),
      showItem: userInfo?.exhibitor,
      visible: [2],
      callback: () => {
        if (!token) {
          dispatch({
            type: 'index/setState',
            payload: {
              loginModalShow: true,
            },
          });
          return;
        }
        history.push('/enterprisePublicity');
      },
    },
    {
      title: intl.formatMessage({ id: 'COMPANY_PRODUCT_LIST' }),
      icon: require('../../assets/my/publicityIcon.png'),
      showItem: userInfo?.exhibitor,
      visible: [2],
      callback: () => {
        if (!token) {
          dispatch({
            type: 'index/setState',
            payload: {
              loginModalShow: true,
            },
          });
          return;
        }
        history.push('/enterprisePublicity');
      },
    },
    {
      title: intl.formatMessage({ id: 'THE_EXHIBITS_COLLECTIONS' }),
      icon: require('../../assets/my/exhibitsIcon.png'),
      showItem: true,
      visible: [1],
      callback: () => {
        if (!token) {
          dispatch({
            type: 'index/setState',
            payload: {
              loginModalShow: true,
            },
          });
          return;
        }
        history.push('/likeProductList');
      },
    },
    {
      title: intl.formatMessage({ id: 'THE_EXHIBITORS_COLLECT' }),
      icon: require('../../assets/my/exhibitorIcon.png'),
      showItem: true,
      visible: [1],
      callback: () => {
        if (!token) {
          dispatch({
            type: 'index/setState',
            payload: {
              loginModalShow: true,
            },
          });
          return;
        }
        history.push('/likeExhibitionList');
      },
    },
    {
      title: intl.formatMessage({ id: 'INFORMATION_COLLECTION' }),
      icon: require('../../assets/my/newsIcon.png'),
      showItem: true,
      visible: [1],
      callback: () => {
        if (!token) {
          dispatch({
            type: 'index/setState',
            payload: {
              loginModalShow: true,
            },
          });
          return;
        }
        history.push('/likeNewsList');
      },
    },
    {
      title: intl.formatMessage({ id: 'THE_EXHIBITION_INFORMATION' }),
      icon: require('../../assets/my/exhibitionIcon.png'),
      showItem: true,
      visible: [1],
      callback: () => {
        history.push('/exhibitionInfo');
      },
    },
    {
      title: intl.formatMessage({ id: 'MY_INQUIRY' }),
      icon: require('../../assets/my/customerServer.png'),
      showItem: true,
      visible: [1],
      callback: () => {
        if (!token) {
          dispatch({
            type: 'index/setState',
            payload: {
              loginModalShow: true,
            },
          });
          return;
        }
        history.push('/wantbuy');
      },
    },
    // {
    //   title: intl.formatMessage({ id: 'BUSINESS_MATCH' }),
    //   icon: require('../../assets/my/business-match.png'),
    //   callback: () => {
    //     if (!token) {
    //       dispatch({
    //         type: 'index/setState',
    //         payload: {
    //           loginModalShow: true,
    //         },
    //       });
    //       return;
    //     }
    //     history.push('/business-match');
    //   },
    // },
    // {
    //   title:intl.formatMessage({id:'BOOTH_RESERVATION'}),
    //   icon: require('../../assets/my/yuding.png'),
    //   // icon: require('../../assets/my/shopCartIcon.png')
    //   callback: () => {
    //     if (!token) {
    //       dispatch({
    //         type: 'index/setState',
    //         payload: {
    //           loginModalShow: true
    //         }
    //       })
    //       return
    //     }
    //     history.push('/scheduled')
    //   }
    // }
  ];
  const lists = [...menus].filter((menu) => true);

  useEffect(() => {
    // console.log(userInfo, 'userInfo')
  }, [userInfo]);

  function handelLogin() {
    if (userInfo) {
      Toast.fail(intl.formatMessage({ id: 'YOU_ARE_LOGGED_IN' }));
      return;
    }
    dispatch({
      type: 'index/setState',
      payload: {
        // loginModalShow: true,
        roleSelectModalVisible: true,
      },
    });
  }
  // 退出登录
  function handleLogOut() {
    removeToken();
    dispatch({
      type: 'index/setState',
      payload: {
        userInfo: null,
      },
    });
  }
  return (
    <div className={styles.page}>
      {roleSelectModalVisible && <RoleSelect />}
      <div className={styles.header}>
        <img className={styles.text} alt="" src={personalImg}></img>
        {!userInfo && (
          <img
            className={styles.login}
            src={
              getLocale() == 'zh-CN'
                ? require('../../assets/my/loginIcon.png')
                : require('../../assets/my/loginIconEn.png')
            }
            alt=""
            onClick={handelLogin}
          ></img>
        )}
      </div>
      {userInfo && (
        <div className={styles.logout} onClick={handleLogOut}>
          退出登录
        </div>
      )}
      <div className={styles.listBox}>
        {lists.map((item, index) => {
          return item?.showItem ? (
            <div
              className={`${styles.item} ${index != lists.length - 1 && styles.lastItem}`}
              key={index}
              onClick={() => {
                item.callback && item.callback();
              }}
            >
              <img src={item.icon} className={styles.icon}></img>
              <span className={styles.title}>{item.title}</span>
            </div>
          ) : (
            <div key={index} />
          );
        })}
      </div>
      {/* <LoginModal isShowModal={isShowModal}></LoginModal> */}
      <NewModal showModal={isShowModal}>
        <Enquiry />
      </NewModal>
    </div>
  );
}

export default Index;
